<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" :title="'修改手机号'">
			<view slot="right" style="margin-right: 15px;">
				<u-button type="primary" size="mini" :disabled="!saveStatus" @click="updateUserInfo">保 存</u-button>
			</view>
		</u-navbar>
		<view class="content" style="padding: 0 15px;">
			<u-form :model="userForm" ref="userForm" rules="telFormRules">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" label="手机号码" prop="mobile"
				 label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="userForm.mobile" type="mobile"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="150">
					<u-input :border="border" placeholder="请输入验证码" v-model="userForm.code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" :disabled="disabled" @click="getCode">{{codeBtn}}</u-button>
				</u-form-item>
				<u-toast ref="uToast"></u-toast>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			 let checkPhone = (rule, value, callback) => {
				 console.log(abc)
			            const reg = /^0?(13[0-9]|15[012356789]|18[0-9]|14[578]|16[6]|17[035768]|19[19])[0-9]{8}$/
			            if ( reg.test(value) ) {
			                return callback();
			            }
			            callback('请输入合法的手机号');
			        };
			return {
				userForm: {
					mobile: ""
				},
				saveStatus: false,
				codeBtn: '获取验证码',
				border: false,
				disabled: false,
				// telFormRules: {
				// 	mobile: [{
				
				// 		required: true,
				// 		message: '请输入手机号 	',
				// 		trigger: 'blur'
				// 	}],
				// 	code: [{
				// 		required: true,
				// 		message: '请输入验证码',
				// 		trigger: 'blur'
				// 	}]
				// },
			}
		},
		onLoad() {
			this.userForm.name = this.$store.getters.userInfo.name
		},
		methods: {
			// onReady() {
			// 			// 设置表单校验规则 否则表单校验无效
			// 			this.$refs.userForm.setRules(this.telFormRules);
			// 			// this.$refs.userForm.validate(this.checkPhone);
			// 		},
			updateUserInfo() {
				this.utils.request("/api/app/user/updateMobile", this.userForm, "post", "app", true).then(res => {
					this.$refs.uToast.show({
						title: '手机号更新成功',
						type: 'success',
						url: '',
						back: true

					})
				}).catch(error => {
					this.$refs.uToast.show({
						title: '手机号更新失败',
						type: 'error',
						url: ''
					})
				})
			},
			// 获取验证码
			getCode() {
				console.log("mobile: " + this.userForm.mobile)
				this.utils.request("/api/admin/aliService/sendSms", {
					"mobile": this.userForm.mobile,
					type:1,
				}, "post", "app", true).then(res => {
					this.tackBtn();
					alert("验证码为" + res.data)
				}).catch(error => {
				

				})
			},
			tackBtn() { //验证码倒数60秒
				let time = 60;
				let timer = setInterval(() => {
					if (time == 0) {
						clearInterval(timer);
						this.codeBtn = '获取验证码';
						this.disabled = false;
					} else {
						this.disabled = true;
						this.codeBtn = time + '秒后重试';
						time--;
					}
				}, 1000);
			},
		},
		watch: {
			userForm: {
				handler(newValue, oldValue) {
					this.saveStatus = !(this.userForm.mobile == null || this.userForm.mobile == '')
				},
				//对象的深度监听deep，默认为false不进行深度监听
				deep: true
			}
		}
	}
</script>

<style>

</style>
